<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
    <title>亿人宝 - 公告列表</title>
    <meta content="" name="keywords"/>
    <meta content="" name="description"/>
    <link rel="stylesheet" th:href="@{/css/common.css}"/>
    <link rel="stylesheet" th:href="@{/css/index.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/css/about.css}" type="text/css">
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}"/>
    <script th:src="@{/bootstrap/js/jquery-3.4.1.min.js}" type="text/javascript"></script>
    <script th:src="@{/bootstrap/js/bootstrap.min.js}" type="text/javascript"></script>
    <script th:src="@{/script/vue.min.js}" type="text/javascript"></script>
    <script th:src="@{/script/axios.min.js}" type="text/javascript"></script>
    <script th:src="@{/script/common.js}" type="text/javascript"></script>
    <script th:src="@{/layui/layer/layer.js}" type="text/javascript"></script>
</head>
<body>
<div id="app">
    <div th:replace="common/public::head"></div>
    <!--关于我们-->
    <div class="bg">
        <div class="contain" id="tabs" style="margin:0 auto;">
            <div class="text-box">
                <div class="text-content" id="text-content">
                    <h1 class="title">网站公告</h1>
                    <ul class="clearfix mt20 new-list">
                        <li class="clearfix list-item" v-for="notice in noticeList">
                            <a :href="'base/notice-detail/'+notice.id | urlFilter">{{notice.title}}</a>
                            <span>{{notice.createDate | formatDate}}</span>
                        </li>
                    </ul>
                    <div class="row text-center">
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                            <nav>
                                <ul class="pagination">
                                    <li :class="{'disabled':pager.currPage == 1}"><span @click="page(pager.currPage-1)">&laquo;</span></li>
                                    <li :class="{'active':pager.currPage == i}" v-for="i in pager.totalPage">
                                        <span @click="page(i)">{{i}}</span>
                                    </li>
                                    <li :class="{'disabled':pager.currPage == pager.totalPage}"><span @click="page(pager.currPage+1)">&raquo;</span></li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--网站底部-->
    <div th:replace="common/public::footer"></div>
</div>
<script type="text/javascript">
    const baseUrl = '[[@{/base/}]]';
    new Vue({
        el: '#app',
        data: {
            noticeList: [],
            pager: {
                currPage: 1,
                pageSize: 10,
                totalRow: 0,
                totalPage: 0
            }
        },
        filters: {
            formatDate: function (value) {
                let date = new Date(value);
                let y = date.getFullYear();
                let MM = date.getMonth() + 1;
                MM = MM < 10 ? ('0' + MM) : MM;
                let d = date.getDate();
                d = d < 10 ? ('0' + d) : d;
                let h = date.getHours();
                h = h < 10 ? ('0' + h) : h;
                let m = date.getMinutes();
                m = m < 10 ? ('0' + m) : m;
                let s = date.getSeconds();
                s = s < 10 ? ('0' + s) : s;
                return y + '-' + MM + '-' + d;
            },
            urlFilter: function (val) {
                return '[[@{/}]]' + val;
            }
        },
        methods: {
            //加载公告
            loadNoticeList: function () {
                axios.get(baseUrl + 'findNotice')
                    .then(response => {
                        console.log(response);
                        this.noticeList = response.data.obj;
                    })
                    .catch(function (error) {
                        console.log(error);
                    })
            },
            loadNoticeListWithPage: function () {
                axios.get(baseUrl + 'findNoticeWithPage', {
                    params: {
                        'currPage': this.pager.currPage
                    }
                })
                    .then(response => {
                        console.log(response);
                        this.noticeList = response.data.data;
                        this.pager = response.data;
                    })
                    .catch(function (error) {
                        console.log(error);
                    })
            },
            page: function (currPage) {
                if (currPage != 0 && this.pager.totalPage != currPage - 1) {
                    this.pager.currPage = currPage;
                    this.loadNoticeListWithPage();
                }
            }
        },
        mounted() {
            this.loadNoticeListWithPage();
        }
    })
</script>
</body>
</html>
